<template>
  <n-form
    inline
    :label-width="80"
    :model="formValue"
    :rules="rules"
    :size="size"
    ref="formRef"
  >
    <n-form-item label="" path="user.name">
      <n-input v-model:value="formValue.user.name" placeholder="输入搜索条件" />
    </n-form-item>
    <n-form-item>
      <n-button @click="handleValidateClick" attr-type="button">搜索</n-button>
    </n-form-item>
  </n-form>
  <n-data-table
    ref="table"
    :columns="columns"
    :data="data"
    :pagination="pagination"
    :max-height="250"
  />
</template>

<script>
import { NButton } from "naive-ui";
import { h, defineComponent, ref } from "vue";

const columns = ({ sendMail }) => {
  return [
    {
      title: "Name",
      key: "name",
    },
    {
      title: "Age",
      key: "age",
    },
    {
      title: "Address",
      key: "address",
    },
    {
      title: "Action",
      key: "action",
      render(row) {
        return h(
          NButton,
          {
            onClick: () => sendMail(row),
          },
          { default: () => "add" }
        );
      },
    },
  ];
};

export default defineComponent({
  setup() {
    const formRef = ref(null);
    // const message = useMessage()
    return {
      formRef,
      size: ref("medium"),
      formValue: ref({
        user: {
          name: "",
          age: "",
        },
        phone: "",
      }),
      rules: {
        user: {
          name: {
            required: false,
            message: "请输入搜索条件",
            trigger: "blur",
          },
        },
      },
      handleValidateClick(e) {
        formRef.value.validate((errors) => {
          if (!errors) {
            // message.success('Valid')
          } else {
            console.log(errors);
            // message.error('Invalid')
          }
        });
      },
    };
  },
  data() {
    return {
      data: Array.apply(null, { length: 46 }).map((_, index) => ({
        key: index,
        name: `Edward King ${index}`,
        age: 32,
        address: `London, Park Lane no. ${index}`,
      })),
      columns: columns({
        sendMail(rowData) {
          console.log(rowData);
        },
      }),
      pagination: {
        pageSize: 15,
      },
    };
  },
});
</script>